<template>
  <div class="function-message" :class="{ vertical: direction == 'vertical', horizontal: direction == 'horizontal' }">
    <span v-for="v in msg">{{ v }}</span>
  </div>
</template>

<script setup>
//自定义函数组件无法使用全局组件，需要单独引入
const props = defineProps({
  remove: {
    type: Function, //传入移除节点方法,这里是createApp中的方法
    default: null,
  },
  msg: {},
  // 方向
  direction: {
    default: 'vertical',
  },
})

setTimeout(() => {
  props.remove()
}, 3000)
</script>

<style scoped lang="scss">
.function-message {
  font-size: 12px;
  color: white;
  box-sizing: border-box;
  background-color: black;
  position: fixed;

  z-index: 10000;
  display: flex;
}
.vertical {
  border-radius: 15px;
  padding: 8px 15px;
  top: 68px;
  left: 50%;
  transform: translate(-50%, 0);
  flex-flow: row wrap;
}
.horizontal {
  border-radius: 15px;
  padding: 15px 8px;
  top: 50%;
  right: 68px;
  transform: translate(0, -50%);
  flex-flow: column wrap;
  span {
    transform: rotate(90deg);
  }
}
</style>
